<template>
  <div v-if="visible" class="speech-popup">
    <Fireworks />
    <div class="speech-popup-content">
      <div class="speech-popup-bg"></div>
      <div class="speech-popup-message">
        {{ currentMessage }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch, onBeforeUnmount, PropType } from 'vue';
import Fireworks from '@/pages/broadcast/Fireworks.vue';

interface MyComponentProps {
  messages: string[];
}

export default defineComponent({
  name: 'SpeechPopup',
  components: {
    // @ts-ignore
    Fireworks
  },
  props: {
    messages: {
      type: Array as PropType<MyComponentProps['messages']>,
      required: true
    },
    isShow: {
      type: Boolean,
      required: true
    },
    duration: {
      type: Number,
      default: 5000
    }
  },
  setup(props, { emit }) {
    const visible = ref(false);
    const speechError = ref(false);
    const currentMessageIndex = ref(0);
    const currentMessage = ref<string | undefined>(props.messages[0]);
    let utterance = ref<SpeechSynthesisUtterance | null>(null);

    const startSpeech = (index: number) => {
      if (index >= props.messages.length) {
        stopCarousel();
        return;
      }
      currentMessageIndex.value = index;
      currentMessage.value = props.messages[currentMessageIndex.value] as string;
      utterance.value = new SpeechSynthesisUtterance(currentMessage.value);
      utterance.value.onend = () => {
        startSpeech(currentMessageIndex.value + 1);
      };
      utterance.value.lang = 'zh-CN';
      utterance.value.rate = 1;
      utterance.value.volume = 100;
      window.speechSynthesis.speak(utterance.value);
    };

    const stopCarousel = () => {
      if (utterance.value) {
        window.speechSynthesis.cancel();
      }
      utterance.value = null;
    };

    onBeforeUnmount(() => {
      stopCarousel();
    });

    const showPopup = () => {
      visible.value = true;
      console.log(1312, props.messages)
      setTimeout(() => {
        startSpeech(0);
      }, 500)
      setTimeout(() => {
        visible.value = false;
      }, props.messages.length * 5500 || props.duration);
      emit('close');
    };

    watch(
        () => props.isShow,
        (value, oldValue, onCleanup) => {
          if (value) {
            showPopup()
          }
        },
    );

    // onMounted(() => {
    //   if (props.isShow) {
    //     showPopup();
    //   }
    // });

    return {
      visible,
      currentMessage,
    };
  },
});
</script>

<style scoped lang="less">
.speech-popup {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.7;
  font-size: 16px;
  animation: fadeInOut 1s forwards;
  position: absolute;
  left: 0; top: 0;
  z-index: 10;
  .speech-popup-content {
    width: 720px;
    height: 432px;
    background-image: url(@/assets/images/broadcast1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 72px;
    padding-top: 180px;
    position: absolute;
    left: 0; top: 0;
    right: 0; bottom: 0;
    margin: auto;
    box-sizing: border-box;
    display: flex;
    .speech-popup-bg {
      width: 102px;
      height: 102px;
      background-image: url(@/assets/images/broadcast2.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      border-radius: 50%;
    }
    .speech-popup-message {
      width: 441px;
      height: 139px;
      background-image: url(@/assets/images/broadcast3.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 24px 40px;
      box-sizing: border-box;
      margin-left: 20px;
      font-family: PingFangSC, PingFang SC,serif;
      font-weight: 600;
      font-size: 32px;
      color: #174052;
      margin-top: -13px;
    }
  }
}

@keyframes fadeInOut {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
</style>
